<template>
	<view style="overflow: hidden;">
		<TabMenu :menus="tabList" :tabCur="tabCur" ref="tableMenu" @clickCtTab="clickCtTab"></TabMenu>
		<!-- 内容 -->
		<scroll-view scroll-y="true" style="height: 90%;">
			<!-- 内容信息 -->
			<template v-if="productOrders && productOrders.length>0">
				<view class="order-list-page">
					<view class="order-item" v-for="(productOrder, index) in productOrders" :key="productOrder.id">
						<view class="order-info">
							<text class="order-number">订单编号：{{ productOrder.no }}</text>
							<text class="order-status" v-if="productOrder.state==0">待发货</text>
							<text class="order-status" v-if="productOrder.state==1">待收货</text>
							<text class="order-status" v-if="productOrder.state==2">已完成</text>
							<text class="order-status" v-if="productOrder.state==3">已取消</text>
						</view>
						<view class="product">
							<view class="product-info">
								<text class="product-name">商品名称：{{ productOrder.productName }}</text>
								<text class="product-price">商品单价：{{ productOrder.productScore }}</text>
								<text class="product-description">商品描述：{{ productOrder.productDescription }}</text>
								<text class="product-quantity">商品数量：{{ productOrder.num }}</text>
							</view>
							<image class="product-image" :src="`http://43.248.190.25:8985/`+productOrder.url"></image>
						</view>

						<view class="order-amount">
							<text>订单金额：{{ productOrder.score }}</text>
							<text>收货地址:{{productOrder.address}}</text>
							<view>
								<text class="button" v-if="productOrder.state==0"
									@click="updateState(productOrder.id,1)">发货</text>
								<text class="button" v-if="productOrder.state==0"
									@click="updateState(productOrder.id,3)">取消</text>
							</view>
						</view>
					</view>
				</view>
			</template>
			<Nodata v-else></Nodata>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getProductOrderListByStoreId,
		updateProductOrderState
	} from '@/request/api/productOrder.js'
	import Nodata from '@/components/Nodata.vue'
	import TabMenu from '@/components/TabMenu.vue'
	export default {
		components: {
			Nodata,
			TabMenu
		},
		activated() {
			this.tabCur = uni.getStorageSync('abc') // 输出 'value1'
			this.$refs.tableMenu.clickCtTab(this.tabCur)
		},
		mounted() {
			this.tabCur = uni.getStorageSync('abc') // 输出 'value1'
			this.$refs.tableMenu.clickCtTab(this.tabCur)
		},
		onHide() {
			uni.setStorageSync('abc', 0)
		},
		data() {
			return {
				tabCur: 0,
				tabList: [{
					title: '全部',
				}, {
					title: '待发货',
				}, {
					title: '已发货',
				}, {
					title: '已完成',
				}, {
					title: '已取消',
				}],
				productOrders: [],
			};
		},
		methods: {
			clickCtTab(ctCur) {
				this.tabCur = ctCur
				console.log('', ctCur)
				if (this.tabCur == undefined) {
					return
				}
				getProductOrderListByStoreId(this.tabCur - 1).then(res => {
					this.productOrders = res.data
				})
			},
			updateState(id, state) {
				updateProductOrderState(id, state).then((res) => {
					uni.showToast({
						title: res.msg,
						icon: 'success',
						complete: () => {
							this.clickCtTab(this.tabCur)
						}
					})
				})
			}

		}
	};
</script>

<style scoped>
	.order-list-page {
		padding: 10px;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		margin-bottom: 10px;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}

	.order-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.order-number,
	.order-status {
		font-weight: bold;
		color: red;
	}

	.product {
		display: flex;
		flex-direction: row;
	}

	.product-info {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.product-image {
		width: 100px;
		height: 100px;
		object-fit: cover;
		margin-bottom: 5px;
	}

	.product-name,
	.product-price,
	.product-description,
	.product-quantity {
		margin-bottom: 5px;
	}

	.order-amount {
		font-weight: bold;
		margin-top: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.order-amount .button {
		float: right;
		border: 1px solid red;
		border-radius: 5px;
		padding-left: 8px;
		padding-right: 8px;
		padding-top: 3px;
		padding-bottom: 3px;
		margin-left: 10px;
		background-color: red;
		color: white;
	}
</style>